<template>
    <div>
        <el-row :gutter="24">
            <el-col :md="3" :sm="6">{{ $t('channel name') }}</el-col>
            <el-col :md="2" :sm="4">{{ $t('HTTP') }}</el-col>
            <el-col :md="2" :sm="4">{{ $t('HLS') }}</el-col>
            <el-col :md="2" :sm="4">{{ $t('RTMP') }}</el-col>
            <el-col :md="2" :sm="4">{{ $t('RTSP') }}</el-col>
            <el-col :md="2" :sm="4">{{ $t('multicast') }}</el-col>
            <el-col :md="3" :sm="6">{{ $t('multicast addr') }}</el-col>
            <el-col :md="1" :sm="2"></el-col>
            <el-col :md="2" :sm="4">{{ $t('push') }}</el-col>
            <el-col :md="5" :sm="10">{{ $t('push url') }}</el-col>
        </el-row>
        <div v-for="dataItem in dataList">
            <el-divider></el-divider>
            <el-row :gutter="24" style="margin-top:16px" v-for="(data, index) in dataItem.streamList">
                <el-col :md="3" :sm="6">
                    <el-input v-if="index == 0" v-model="dataItem.name" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-switch v-model="data.http" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-switch v-model="data.hls" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-switch v-model="data.rtmp" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-switch v-model="data.rtsp.enable" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
                    <!-- <el-switch v-model="data.rtsp" inline-prompt active-text="ON" inactive-text="OFF"></el-switch> -->
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-switch v-model="data.udp.enable" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
                </el-col>
                <el-col :md="3" :sm="6">
                    <el-input v-model="data.udp.ip_port" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="1" :sm="2">
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-switch v-model="data.push.enable" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
                </el-col>
                <el-col :md="5" :sm="10">
                    <el-input v-model="data.push.path" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
  
<script setup name="video-stream">
const props = defineProps(['data'])
let dataList = ref([])

watchEffect(() => {
    dataList.value = props.data?.length ? props.data.map(item => {
        let udp1 = item.stream.udp
        item.stream.udp.ip_port = `${udp1.ip}:${udp1.port}`
        let udp2 = item.stream2.udp
        item.stream2.udp.ip_port = `${udp2.ip}:${udp2.port}`

        item.streamList = [item.stream, item.stream2]
        return item
    }) : []
})

onUnmounted(() => {

});

</script>
  
<style scoped lang="scss">
.encode-setting {}
</style>
  
  